<template>
  <div class="home">
    <div class="home-container">
      <div class="type-title">1.使用vue-awesome-swiper实现 icon轮播</div>
      <div class="home-icon-feature">
        <swiper :options="iconSwiperOption">
          <swiper-slide  v-for="(page,index) in pages" :key="index">
            <div class="icon-list" v-for="(item,i) in page" :key="i">
              <div class="icon-img-div">
                <img :src="item.iconCover" class="icon-img">
              </div>
              <div>{{item.name}}</div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
      <div class="type-title">2.上拉刷新/下拉加载更多 demo</div>
      <div class="pull-wrapper" @click="toPullPage">查看 example demo</div>
      <div class="type-title">3.vue递归组件实现树形折叠结构菜单</div>
      <div class="pull-wrapper" @click="toRecursionDemo">查看 example demo </div>
      <div class="type-title">3.1vue递归组件实现树形表格</div>
      <div class="pull-wrapper" @click="toRecursionDemo2">查看 example demo </div>


      <!--  -->
    </div>
    <tabBar :selected="1"></tabBar>
  </div>
</template>

<script>
import tabBar from '@/components/tabBar/tabBar';
import searchNav from '@/components/searchNav/searchNav';
export default {
  name: 'Home',
  data () {
    return {
      bannerSwiperList: [],
      iconCategoryList: [],
      iconSwiperOption:{
        autoplay:true,
        pagination:{
          el: '.swiper-pagination'
        }
      }
    }
  },
  created () {
    this.initPage();
  },
  computed: {
    pages () {
      const pages = [];
      this.iconCategoryList.forEach((item,index) => {
        const page = Math.floor(index / 10); // 一页10条，看看分在哪一页；
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      })
      return pages;
    }
  },
  methods: {
    initPage () {
      this.$axios.get('/static/json/featureIcon.json').then(res => {
        this.iconCategoryList = res.data.iconList;
      })
    },
    // pull上拉下拉实例demo
    toPullPage () {
      this.$router.push({path: '/pullRefresh'})
    },
    // 递归组件
    toRecursionDemo () {
      this.$router.push({path: '/recursion'})
    },
    toRecursionDemo2 () {
      this.$router.push({path: '/treeTable'})
    }
  },
   components:{
    tabBar,
    searchNav
  },
}


</script>

<style scoped lang="less">
  .home-icon-feature {
    background-color:#fff;
  }
  .type-title {
    font-weight:bold;
    background-color:#ABCDEF;
  }
  .icon-list {
    overflow:hidden;
    float:left;
    width:20%;
    padding:15px 0px;
    display:flex;
    flex-direction: column;
    justify-content:cneter;
    align-items: center;
  }
  .icon-img {
    width: 48px;
    height:48px;
  }
  .home-icon-feature  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom:0px;
  }
  /*  */
  .pull-wrapper {
    padding:20px;
    background-color:#fff;
  }
</style>
